<script setup>
import { reactive, toRefs, ref } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElDrawer, ElIcon, ElTable, ElTableColumn } from 'element-plus';
import { OPERATION_TYPE } from '@/common/common-const';
import PaginationIndex from '@/components/PaginationIndex.vue';
import ReleasePromptMessage from '@/components/ReleasePromptMessage.vue';
import SvgIconIndex from '@/components/SvgIconIndex.vue';

const props = defineProps({
  drawerTableShow: Boolean,
});
const { drawerTableShow } = toRefs(props);
const emit = defineEmits(['closeBoxShowDialog']);
const total = ref(0);

const selectParams = reactive({
  pageNumber: 1,
  pageSize: 15,
});

const messageInfo = reactive({
  messageBoxShow: false,
  messageText: '',
  messageBoxType: '',
});

const gridData = ref([
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:24',
    updateBy: null,
    updateTime: null,
    remark: '性别男',
    dictCode: 1,
    dictSort: 1,
    dictLabel: '男',
    dictValue: '0',
    dictType: 'sys_user_sex',
    cssClass: '',
    listClass: '',
    isDefault: 'Y',
    status: '0',
    default: true,
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:24',
    updateBy: null,
    updateTime: null,
    remark: '性别女',
    dictCode: 2,
    dictSort: 2,
    dictLabel: '女',
    dictValue: '1',
    dictType: 'sys_user_sex',
    cssClass: '',
    listClass: '',
    isDefault: 'N',
    status: '0',
    default: false,
  },
  {
    createBy: 'admin',
    createTime: '2023-04-23 16:13:25',
    updateBy: null,
    updateTime: null,
    remark: '性别未知',
    dictCode: 3,
    dictSort: 3,
    dictLabel: '未知',
    dictValue: '2',
    dictType: 'sys_user_sex',
    cssClass: '',
    listClass: '',
    isDefault: 'N',
    status: '0',
    default: false,
  },
]);

// 分页
const handleCurrentChange = (val) => {
  selectParams.pageNumber = val;
};

// 操作
const handleOperation = (type, item) => {
  if (type == OPERATION_TYPE.DELETE) {
    messageInfo.infoBoxValue = item;
    messageInfo.messageBoxType = '删除';
    messageInfo.messageBoxShow = true;
    messageInfo.messageText = '该数据删除后不可恢复，确定要删除吗？';
  }
};

const handleMessageBox = (val) => {
  messageInfo.messageBoxShow = false;
  messageInfo.messageText = '';

  if (val) {
    //  删除接口
  }

  messageInfo.messageBoxType = '';
};

const closeBoxShowDialog = () => {
  emit('closeBoxShowDialog');
};
</script>
<template>
  <div>
    <ElDrawer v-model="drawerTableShow" direction="rtl" size="50%" :show-close="false" :close-on-click-modal="false">
      <template #header>
        <div class="title_box">
          <p>字典数据</p>
          <p @click="closeBoxShowDialog()">
            <ElIcon><CloseBold /></ElIcon>
          </p>
        </div>
      </template>

      <div class="btn-add flex-center cursor-pointer" @click="handleOperation('ADD')">
        <SvgIconIndex icon-class="add" size="20px" class="cursor-pointer" />新建
      </div>

      <ElTable
        :data="gridData"
        style="width: 100%"
        border
        row-key="id"
        :header-cell-style="{
          color: '#333333',
          background: 'rgba(97, 186, 55, 0.06)',
        }"
      >
        <ElTableColumn property="dictLabel" label="字典标签" align="center" />
        <ElTableColumn property="dictValue" label="字典键值" align="center" />
        <ElTableColumn property="remark" label="备注" align="center" />
        <ElTableColumn property="createTime" label="创建时间" align="center" />
        <ElTableColumn label="操作" align="center">
          <template #default="scope">
            <div class="flex items-center justify-around">
              <div
                class="edit_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('EDIT', scope.row)"
              >
                修改
              </div>
              <div
                class="del_btn h-35px w-75px flex-center cursor-pointer"
                @click="handleOperation('DELETE', scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </ElTableColumn>
      </ElTable>
      <PaginationIndex
        :page-number="selectParams.pageNumber"
        :page-size="selectParams.pageNumber"
        :total="total"
        @handle-current-change="handleCurrentChange"
      />
    </ElDrawer>

    <!-- 提示 -->
    <ReleasePromptMessage
      v-if="messageInfo.messageBoxShow"
      :message-box-show="messageInfo.messageBoxShow"
      :message-text="messageInfo.messageText"
      :message-box-type="messageInfo.messageBoxType"
      @handle-message-box="handleMessageBox"
    />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  margin-bottom: 12px;
}
.btn-add {
  position: absolute;
  top: 54px;
  right: 45px;
  width: 100px;
  height: 40px;
  color: $base-button-color-white;
  background-color: $base-button-color-green;
  border-radius: 5px;
}
.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  p {
    &:first-child {
      color: #121212;
      font-weight: 600;
      font-size: 18px;
    }

    &:last-child {
      cursor: pointer;
    }
  }
}

.edit_btn,
.del_btn {
  font-size: $base-system-font-size-base;
  border-radius: 5px;
}
.edit_btn {
  color: $base-button-color-blue;
  background-color: $base-button-background-blue;
}

.del_btn {
  color: $base-button-color-red;
  background-color: $base-button-background-red;
}
</style>
